<template>
  <div class="fieldMap wfull flx-b pb32">
    <div class="sourceField hfull flx">
      <div class="title wfull tac fs20 mb10">源字段</div>
      <div
        :class="['fieldItem', 'wfull', 'mb10', 'pd5', 'flx-s', { active: item === curSourceSelect }]"
        v-for="(item, index) in sourceFieldList"
        :key="'source' + index"
        @click="fieldSelect(item, 'source')"
      >
        {{ item.COLUMNNAME }}
      </div>
    </div>
    <div class="mapResult hfull flx">
      <div class="title wfull tac fs20 mb10">映射结果</div>
      <div class="fieldItem wfull mb10 pd5 flx-s" v-for="(item, index) in resultMap" :key="index">
        {{ item.source }} ==> {{ item.target }}
      </div>
    </div>
    <div class="targetField hfull flx">
      <div class="title wfull tac fs20 mb10">目标字段</div>
      <div
        :class="['fieldItem', 'wfull', 'mb10', 'pd5', 'flx-s', { active: item === curTargetSelect }]"
        v-for="(item, index) in targetFieldList"
        :key="'target' + index"
        @click="fieldSelect(item, 'target')"
      >
        {{ item.COLUMNNAME }}
      </div>
    </div>
    <div class="footer wfull flx-e">
      <a-space>
        <a-Button @click="cancel">取消</a-Button>
        <a-Button type="primary" @click="ok">确定</a-Button>
      </a-space>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 源目标 编码表信息集合
    codeTableInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      // 网关前缀
      gateWayPrefix: '/zg-datapush',
      sourceFieldList: [],
      targetFieldList: [],
      resultMap: [],
      // 当前选择的源字段
      curSourceSelect: undefined,
      // 当前选择的目标字段
      curTargetSelect: undefined,
      // 上一步点击了哪一种类型的源字段
      preFieldType: undefined
    }
  },
  components: {},
  computed: {},
  methods: {
    // 初始化字段数据
    initData() {
      const { sourceDatasourceCode, sourceTableName, targetDatasourceCode, targetTableName } = this.codeTableInfo
      this.getFieldList({ datasourceCode: sourceDatasourceCode, tableName: sourceTableName }, 'source')
      this.getFieldList({ datasourceCode: targetDatasourceCode, tableName: targetTableName }, 'target')
    },
    // 获取字段列表
    getFieldList(params, type) {
      const { datasourceCode, tableName } = params
      if (datasourceCode && tableName) {
        this.$http.post(`${this.gateWayPrefix}/datapush/tableStructure/columns`, params, (data) => {
          type === 'source' ? (this.sourceFieldList = data) : (this.targetFieldList = data)
        })
      }
    },
    // 获取可能的保存的映射数据
    getMappingData() {
      this.resultMap = []
      this.$http.post(`${this.gateWayPrefix}/datapush/field-mapping/list`, { id: this.codeTableInfo.id }, (data) => {
        data.forEach((item) => {
          const { sourceField, targetField, id } = item
          this.resultMap.push({ source: sourceField, target: targetField, id })
        })
      })
    },
    // 字段选择
    fieldSelect(data, type) {
      const { COLUMNNAME } = data
      if (type === 'source') {
        const findInfo = this.resultMap.find((item) => item.source === COLUMNNAME)
        if (!findInfo) this.resultMap.push({ source: COLUMNNAME, target: '' })
        this.curSourceSelect = data
        this.preFieldType = type
      } else {
        if (this.curSourceSelect === undefined) {
          this.$message.warning('请先选择源字段')
        } else {
          const findInfo = this.resultMap.find((item) => item.source === this.curSourceSelect.COLUMNNAME)
          this.$set(findInfo, 'target', COLUMNNAME)
          this.curTargetSelect = data
          this.preFieldType = type
        }
      }
    },
    cancel() {
      this.resetField()
      this.$emit('ok')
    },
    // 保存
    ok() {
      const { codeTableInfo, resultMap } = this
      const { id } = codeTableInfo
      const mappings = resultMap.map((item) => {
        const { source, target } = item
        return Object.assign(
          {},
          {
            sourceField: source,
            targetField: target
          }
        )
      })
      this.$http.post(
        `${this.gateWayPrefix}/datapush/field-mapping/batchSave`,
        {
          mappings,
          taskId: id
        },
        () => {
          this.$message.success('保存成功')
          this.resetField()
          this.$emit('ok')
        }
      )
    },
    resetField() {
      Object.assign(this, {
        sourceFieldList: [],
        targetFieldList: [],
        resultMap: [],
        curSourceSelect: undefined,
        curTargetSelect: undefined,
        preFieldType: undefined
      })
    }
  },
  created() {},
  mounted() {}
}
</script>
<style lang="less" scoped>
.fieldMap {
  position: relative;
  align-items: flex-start;
  .sourceField,
  .mapResult,
  .targetField {
    width: 33%;
    flex-wrap: wrap;
    .title {
      background: #999;
      height: 30px;
    }
    .fieldItem {
      cursor: pointer;
      height: 25px;
      &:hover {
        background: #d9d4d4;
      }
      &.active {
        background: #6587ef;
      }
    }
  }
  .footer {
    position: absolute;
    bottom: 0;
  }
}
</style>
